<template>
  <div>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="6" v-for="(infor, i) in inforCardData" :key="`infor-${i}`"
        style="height: 150px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <p>{{ infor.title }}</p>
          <count-to :end="infor.count" count-class="count-style" />
          <p>{{ '现金：' + infor.cash.toFixed(2) + '&emsp;&emsp;' + '非现金：' + infor.noCash.toFixed(2) }}</p>
        </infor-card>
      </i-col>
      <i-col :xs="12" :md="8" :lg="6" v-for="(device, i) in deviceData" :key="`device-${i}`"
        style="height: 150px;padding-bottom: 10px;">
        <infor-card shadow :color="device.color" :icon="device.icon" :icon-size="36">
          <p>{{ device.title }}</p>
          <count-to :end="device.count" count-class="count-style" />
        </infor-card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 10px;">
      <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-pie v-if="showChartPie" style="height: 300px;" :value="pieData" text="用户支付方式"></chart-pie>
        </Card>
      </i-col>
      <i-col :md="24" :lg="16" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-bar v-if="showChartBar" style="height: 300px;" :value="barData" text="上周销售设备数量" />
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { ChartPie, ChartBar } from '_c/charts'
import Example from './example.vue'
import rcRequest from 'rc-request'
import "moment/locale/zh-cn"
import moment from 'moment'

const params = {
  method: 'post',
  data: {
    pay_date: `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`,
  },
};

export default {
  name: 'home',
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
    Example
  },
  data() {
    return {
      inforCardData: [
        { title: '今日销售额', icon: 'ios-calendar', count: 0, cash: 0, noCash: 0, color: '#2d8cf0' },
        { title: '昨日销售额', icon: 'md-calendar', count: 0, cash: 0, noCash: 0, color: '#19be6b' },
        { title: '本周销售额', icon: 'ios-clipboard', count: 0, cash: 0, noCash: 0, color: '#ff9900' },
        { title: '本月销售额', icon: 'md-clipboard', count: 0, cash: 0, noCash: 0, color: '#ed3f14' }
      ],
      deviceData: [
        { title: '在线设备数量', icon: 'ios-stats', count: 0, color: '#99621e' },
        { title: '离线设备数量', icon: 'ios-stats-outline', count: 0, color: '#739e82' },
        { title: '异常设备数量', icon: 'md-warning', count: 0, color: '#b97375' },
        { title: '缺货设备数量', icon: 'md-remove-circle', count: 0, color: '#414f86' }
      ],
      pieData: [
        { value: 0, name: '微信支付' },
        { value: 0, name: '支付宝支付' },
        { value: 0, name: '现金支付' },
        { value: 0, name: '银行卡支付' },
      ],
      barData: {
        '星期一': 0,
        '星期二': 0,
        '星期三': 0,
        '星期四': 0,
        '星期五': 0,
        '星期六': 0,
        '星期日': 0
      },
      showChartPie: false,
      showChartBar: false,
    }
  },
  async mounted() {
    const { data: { data: [{ day_total_fee: todayCount }] } } = await rcRequest({ ...params, url: '/pay/select_now_allmoney' });
    const { data: { data: [{ day_total_fee: todayCash }] } } = await rcRequest({ ...params, url: '/pay/select_now_cash' });
    const { data: { data: [{ day_total_fee: todayNocash }] } } = await rcRequest({ ...params, url: '/pay/select_now_noncash' });
    this.inforCardData[0].count = todayCount * 1;
    this.inforCardData[0].cash = todayCash * 1;
    this.inforCardData[0].noCash = todayNocash * 1;

    const { data: { data: [{ day_total_fee: yesterdayCount }] } } = await rcRequest({ ...params, url: '/pay/select_yesterday_allmoney' });
    const { data: { data: [{ day_total_fee: yesterdayCash }] } } = await rcRequest({ ...params, url: '/pay/select_yesterday_cash' });
    const { data: { data: [{ day_total_fee: yesterdayNocash }] } } = await rcRequest({ ...params, url: '/pay/select_yesterday_noncash' });
    this.inforCardData[1].count = yesterdayCount * 1;
    this.inforCardData[1].cash = yesterdayCash * 1;
    this.inforCardData[1].noCash = yesterdayNocash * 1;

    const { data: { data: [{ day_total_fee: weekCount }] } } = await rcRequest({ ...params, url: '/pay/select_this_week_allmoney' });
    const { data: { data: [{ day_total_fee: weekCash }] } } = await rcRequest({ ...params, url: '/pay/select_this_week_cash' });
    const { data: { data: [{ day_total_fee: weekNocash }] } } = await rcRequest({ ...params, url: '/pay/select_this_week_noncash' });
    this.inforCardData[2].count = weekCount * 1;
    this.inforCardData[2].cash = weekCash * 1;
    this.inforCardData[2].noCash = weekNocash * 1;

    const { data: { data: [{ day_total_fee: monthCount }] } } = await rcRequest({ ...params, url: '/pay/select_this_month_allmoney' });
    const { data: { data: [{ day_total_fee: monthCash }] } } = await rcRequest({ ...params, url: '/pay/select_this_month_cash' });
    const { data: { data: [{ day_total_fee: monthNocash }] } } = await rcRequest({ ...params, url: '/pay/select_this_month_noncash' });
    this.inforCardData[3].count = monthCount * 1;
    this.inforCardData[3].cash = monthCash * 1;
    this.inforCardData[3].noCash = monthNocash * 1;

    const { data: { data: [ { online_machine } ] } } = await rcRequest({ method: 'post', url: '/machine/select_online_machine' });
    const { data: { data: [ { offline_machine } ] } } = await rcRequest({ method: 'post', url: '/machine/select_offline_machine' });
    const { data: { data: [ { abnormal_machine } ] } } = await rcRequest({ method: 'post', url: '/machine/select_abnormal_machine' });
    const { data: { data: [ { oos_machine } ] } } = await rcRequest({ method: 'post', url: '/machine/select_oos_machine' });
    this.deviceData[0] && (this.deviceData[0].count = online_machine * 1);
    this.deviceData[1] && (this.deviceData[1].count = offline_machine * 1);
    this.deviceData[2] && (this.deviceData[2].count = abnormal_machine * 1);
    this.deviceData[3] && (this.deviceData[3].count = oos_machine * 1);

    const { data: { data:
      [
        { paycount: wechatCount },
        { paycount: alipayCount },
        { paycount: cashCount },
        { paycount: cardCount },
      ] }
    } = await rcRequest({ method: 'post', url: '/pay/select_pay_pay_type' });
    this.pieData[0].value = wechatCount * 1;
    this.pieData[1].value = alipayCount * 1;
    this.pieData[2].value = cashCount * 1;
    this.pieData[3].value = cardCount * 1;
    this.showChartPie = true;

    moment.locale('zh-cn');
    const lastMonday = moment().week(moment().week() - 1).startOf("week").format("YYYY-MM-DD");
    const lastTuesday = moment().week(moment().week() - 1).startOf("week").add(1, 'days').format("YYYY-MM-DD");
    const lastWednesday = moment().week(moment().week() - 1).startOf("week").add(2, 'days').format("YYYY-MM-DD");
    const lastThursday = moment().week(moment().week() - 1).startOf("week").add(3, 'days').format("YYYY-MM-DD");
    const lastFriday = moment().week(moment().week() - 1).startOf("week").add(4, 'days').format("YYYY-MM-DD");
    const lastSaturday = moment().week(moment().week() - 1).startOf("week").add(5, 'days').format("YYYY-MM-DD");
    const lastSunday = moment().week(moment().week() - 1).startOf("week").add(6, 'days').format("YYYY-MM-DD");
    
    const { data: { data: [ lastMondayNums ] } } = await rcRequest({ method: 'post', url: '/pay/select_last_week_pay_count', data: { pay_date: lastMonday } });
    const { data: { data: [ lastTuesdayNums ] } } = await rcRequest({ method: 'post', url: '/pay/select_last_week_pay_count', data: { pay_date: lastTuesday } });
    const { data: { data: [ lastWednesdayNums ] } } = await rcRequest({ method: 'post', url: '/pay/select_last_week_pay_count', data: { pay_date: lastWednesday } });
    const { data: { data: [ lastThursdayNums ] } } = await rcRequest({ method: 'post', url: '/pay/select_last_week_pay_count', data: { pay_date: lastThursday } });
    const { data: { data: [ lastFridayNums ] } } = await rcRequest({ method: 'post', url: '/pay/select_last_week_pay_count', data: { pay_date: lastFriday } });
    const { data: { data: [ lastSaturdayNums ] } } = await rcRequest({ method: 'post', url: '/pay/select_last_week_pay_count', data: { pay_date: lastSaturday } });
    const { data: { data: [ lastSundayNums ] } } = await rcRequest({ method: 'post', url: '/pay/select_last_week_pay_count', data: { pay_date: lastSunday } });
    this.barData['星期一'] = lastMondayNums ? lastMondayNums.day_nums * 1 : 0;
    this.barData['星期二'] = lastTuesdayNums ? lastTuesdayNums.day_nums * 1 : 0;
    this.barData['星期三'] = lastWednesdayNums ? lastWednesdayNums.day_nums * 1 : 0;
    this.barData['星期四'] = lastThursdayNums ? lastThursdayNums.day_nums * 1 : 0;
    this.barData['星期五'] = lastFridayNums ? lastFridayNums.day_nums * 1 : 0;
    this.barData['星期六'] = lastSaturdayNums ? lastSaturdayNums.day_nums * 1 : 0;
    this.barData['星期日'] = lastSundayNums ? lastSundayNums.day_nums * 1 : 0;
    this.showChartBar = true;
  }
}
</script>

<style lang="less">
.count-style {
  font-size: 50px;
}
</style>
